<template>
  <div class="app-container" >
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <p>
        <el-page-header @back="goBack" :content="'当前配方名称:'+ this.$route.query.formulaName"> </el-page-header>
      </p>

       <el-row :gutter="20" class="toolbar">
        <el-col :span="2">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="handerCreateFormulaSpecifications"
          >
            {{ $t("添加规格") }}
          </el-button>
        </el-col>
      </el-row>
      <br/>
      <el-row class="toolbar">
        <el-col >
          <el-tabs  v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              v-for="(item, index) in listFormulaSpecifications"
              :key="index"
              :label="item.specificationsName + '/$' + item.specificationsPrice"
              :name="String(item.id)"
            >
              <span style="font-size: 16px;font-weight: bold" slot="label" class="parent-wrapper">
                【
                {{ item.specificationsName + "/$" + item.specificationsPrice }}
                （{{item.isDefault?'是默认':'否'}}）
                <el-link type="primary" :style="{fontSize:'17px',marginLeft:'5px'}" circle @click="handerEditFormulaSpecifications(item)"
                ><i class="el-icon-edit el-icon--right"></i>编辑
                </el-link >
                <el-link type="danger" :style="{fontSize:'17px',marginLeft:'5px'}" @click="handerDeleteFormulaSpecifications(item)"
                ><i class="el-icon-delete el-icon--right"></i>删除
                </el-link>
                】
                <el-button @click="handlerAddFormulaSpecificationsDataProportioning(item)" type="text"><i class="el-icon-circle-plus-outline"></i>{{$t("选择原料")}}</el-button>
              </span>

              <!-- 查询结果 -->
              <el-table
                  style="font-size: 16px;font-weight: bold"
                  v-loading="listLoading"
                  :data="formulaSpecificationsDataProportioningList"
                  :element-loading-text="$t('Searching')"
                  fit
                  row-key="id"
                  tooltip-effect="dark"
                  ref="multipleTable"
              >
                <template slot="empty">
                  <el-empty description="还没有数据"></el-empty>
                </template>
                <!--            <el-table-column type="selection" width="55"> </el-table-column>-->
                <!--            <el-table-column label="选择" align="center" width="65">
                              <template slot-scope="scope">
                                <el-radio :label="scope.$index+1" v-model="radio"
                                          @click.native="getCurrentRow(scope.row)"></el-radio>
                              </template>
                            </el-table-column>-->
                <el-table-column
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column
                    align="center"
                    min-width="210"
                    :label="$t('原料名称')"
                    prop="lumiereFormulaMaterial.materialName"
                >
                  <template slot-scope="scope">
                    <i v-if="scope.row.isEdit" :style="{color:'red'}" class="el-icon-edit"></i>
                    <span :style="{'color' : scope.row.groupColor}">{{scope.row.lumiereFormulaMaterial.materialName}} </span>
                    <span v-if="scope.row.isDefault" style="color: #13ce66"><i class="el-icon-success"></i> </span>
                  </template>
                </el-table-column>




                <el-table-column
                    align="center"
                    min-width="130"
                    :label="$t('原料类型')"
                    prop="materialType"
                >
                  <template slot-scope="scope">
                <span>{{
                    scope.row.materialType === 0 ? "主料" : "辅料"
                  }}</span>

                  </template></el-table-column
                >

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('原料图片')"
                    prop="lumiereFormulaMaterial.materialImg"
                >
                  <template slot-scope="scope">
                    <el-image
                        preview-src-list
                        style="border-radius: 0%; width: 40px"
                        :src="scope.row.lumiereFormulaMaterial.materialImg"
                        width="20"
                    >
                      <div slot="error" class="image-slot">
                        <i
                            style="font-size: 30px"
                            class="el-icon-picture-outline"
                        ></i>
                      </div>
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    min-width="130"
                    :label="$t('原料组号')"
                    prop="price"
                >
                  <template slot-scope="scope">
                    <span :style="{'color' : scope.row.groupColor}">【 {{ scope.row.groupName}} 】</span>
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  align="center"
                  min-width="100"
                  :label="$t('配方图片')"
                  prop="lumiereFormulaMaterial.materialImg"
                /> -->



                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('原料价格')"
                    prop="price"
                >
                  <template slot-scope="scope">
                    <span >${{scope.row.price}}</span>
                  </template>
                </el-table-column>

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('额外收费')"
                    :formatter="formatPrice"
                    prop="surcharge"
                />

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('数量')"
                    prop="quantity"
                />
                <el-table-column
                  align="center"
                  min-width="100"
                  :label="$t('制作单位')"
                  prop="makeUnit"
                />

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('计费条件')"
                    prop="chargingMode"
                >
                  <template slot-scope="scope">
                    > {{scope.row.chargingCondition}}
                  </template>
                </el-table-column>

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('数量上限')"
                    prop="quantityRestrict"
                />

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('单位')"
                    prop="unit"
                />

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('消耗系数')"
                    prop="consumeSystem"
                />

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('计费条件')"
                    prop="chargingMode"
                />

                <el-table-column
                    align="center" fixed="right"
                    :label="$t('Operate')"
                    width="250"
                >
                  <template slot="header" slot-scope="{ row }">
                    {{ $t("Operate") }}
                    <i class="el-icon-setting" style="color: #d35e32"></i>
                  </template>

                  <template slot-scope="scope">
                    <el-row>
                      <el-col :span="8">
                        <el-button
                            type="primary"
                            round
                            icon="el-icon-edit"
                            size="small"
                            @click="
                        handerEditFormulaSpecificationsDataProportioning(
                          scope.row
                        )
                      "
                        >{{ $t("Edit") }}
                        </el-button>
                      </el-col>
                      <el-col :span="8">
                        <el-button
                            v-if="scope.row.id != undefined"
                            icon="el-icon-delete"
                            round
                            type="danger"
                            size="small"
                            @click="
                        handerDeleteFormulaSpecificationsDataProportioning(
                          scope.row
                        )
                      "
                        >{{ $t("删除") }}
                        </el-button>
                      </el-col>
                      <el-col :span="8">
                        <el-button
                            icon="el-icon-document-copy"
                            round
                            size="small"
                            @click="
                        handerCopyFormulaSpecificationsDataProportioning(
                          scope.row
                        )
                      "
                        >{{ $t("复制") }}
                        </el-button>
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
<!--            <el-tab-pane :label='$t("添加规格")' name="fourth"><el-empty :image-size="200"></el-empty></el-tab-pane>-->
          </el-tabs>

        </el-col>
      </el-row>
    </div>

    <!-- 第一个弹框-添加规格 -->
    <dic class="dialogCenter">
      <el-dialog
        :title="$t('规格设置')"
        :visible.sync="dialogVisible1"
        width="44%"
        :before-close="handleClose"
        :close-on-click-modal="false"
      >
        <el-alert
          title="规格名称是用于明确表述商品在尺寸、大小、容量、性能等方面具体标准和特性的名称。"
          type="info"
          show-icon>
        </el-alert>
        <br/>
        <el-alert
          title="规格值用于具体量化或明确描述商品规格特征的数值或特定表述。"
          type="info"
          show-icon>
        </el-alert>
        <br/>
        <!-- 表单内容 -->
        <div>
          <el-form
            :model="formulaSpecificationsForm"
            :rules="rulesSpecifications"
            ref="formulaSpecificationsForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item :label="$t('规格名称')" prop="specificationsName">
              <el-input
                v-model="formulaSpecificationsForm.specificationsName"
                :placeholder="$t('请输入规格名称')"
              ></el-input>
            </el-form-item>

            <el-form-item :label="$t('规格值')" prop="specificationsValue">
              <el-input
                v-model="formulaSpecificationsForm.specificationsValue"
                :placeholder="$t('请输入规格值')"
              ></el-input>
            </el-form-item>

            <!-- <el-form-item :label="$t('规格图片')">
              <el-input
                v-model="formulaSpecificationsForm.specificationsImg"
                disabled="true"
                :placeholder="$t('请输入规格图片')"
              ></el-input>
            </el-form-item> -->

            <el-form-item :label="$t('规格图片')" prop="specificationsImg">
              <el-upload
                :headers="headers"
                :action="uploadPath"
                :show-file-list="false"
                :on-success="uploadPicUrl"
                class="avatar-uploader"
                accept=".jpg,.jpeg,.png,.gif"
              >
                <img
                  v-if="formulaSpecificationsForm.specificationsImg"
                  :src="formulaSpecificationsForm.specificationsImg"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
                <label
                  v-if="formulaSpecificationsForm.specificationsImg"
                  class="el-upload-list__item-status-label avatar-uploader__status_label"
                  @click.stop="handleRemove()"
                  ><i class="el-icon-delete"></i
                ></label>
              </el-upload>
            </el-form-item>

            <el-form-item :label="$t('规格价格')" prop="specificationsPrice">
              <el-input
                v-model="formulaSpecificationsForm.specificationsPrice"
                :placeholder="$t('请输入规格价格')"
              ></el-input>
            </el-form-item>

            <el-form-item :label="$t('是否默认')" prop="isDefault">
              <el-switch
                v-model="formulaSpecificationsForm.isDefault"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-text="$t('是')"
                :inactive-text="$t('否')"
              >
              </el-switch>
            </el-form-item>

            <el-form-item :label="$t('同步原料')" >
              <el-checkbox :disabled="listFormulaSpecifications.length == 0" v-model="formulaSpecificationsForm.sync"></el-checkbox>
            </el-form-item>

            <el-form-item>
              <el-button
                icon="el-icon-check"
                type="primary"
                @click="
                  submitAddFormulaSpecifications('formulaSpecificationsForm')
                "
                >{{ $t("立即创建") }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </dic>

    <!-- 第二个弹框-编辑规格 -->
    <dic class="dialogCenter">
      <el-dialog
        :title="$t('编辑规格')"
        :visible.sync="dialogVisible2"
        width="40%"
        :before-close="handleClose"
        :close-on-click-modal="false"
      >
        <!-- 表单内容 -->
        <div>
          <el-form
            :model="formulaSpecificationsForm"
            :rules="rulesSpecifications"
            ref="formulaSpecificationsForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item :label="$t('规格名称')" prop="specificationsName">
              <el-input
                v-model="formulaSpecificationsForm.specificationsName"
                :placeholder="$t('请输入规格名称')"
              ></el-input>
            </el-form-item>

            <el-form-item :label="$t('规格值')" prop="specificationsValue">
              <el-input
                v-model="formulaSpecificationsForm.specificationsValue"
                :placeholder="$t('请输入规格值')"
              ></el-input>
            </el-form-item>

            <el-form-item :label="$t('规格图片')" prop="specificationsImg">
              <el-upload
                :headers="headers"
                :action="uploadPath"
                :show-file-list="false"
                :on-success="uploadPicUrl"
                class="avatar-uploader"
                accept=".jpg,.jpeg,.png,.gif"
              >
                <img
                  v-if="formulaSpecificationsForm.specificationsImg"
                  :src="formulaSpecificationsForm.specificationsImg"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
                <label
                  v-if="formulaSpecificationsForm.specificationsImg"
                  class="el-upload-list__item-status-label avatar-uploader__status_label"
                  @click.stop="handleRemove()"
                  ><i class="el-icon-delete"></i
                ></label>
              </el-upload>
            </el-form-item>
            <!-- <el-form-item :label="$t('规格图片')">
              <el-input
                v-model="formulaSpecificationsForm.specificationsImg"
                disabled="true"
                :placeholder="$t('请输入规格图片')"
              ></el-input>
            </el-form-item> -->

            <el-form-item :label="$t('规格价格')" prop="specificationsPrice">
              <el-input
                v-model="formulaSpecificationsForm.specificationsPrice"
                :placeholder="$t('请输入规格价格')"
              ></el-input>
            </el-form-item>

            <el-form-item :label="$t('是否默认')" prop="isDefault">
              <el-switch
                v-model="formulaSpecificationsForm.isDefault"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-text="$t('是')"
                :inactive-text="$t('否')"
              >
              </el-switch>
            </el-form-item>

            <el-form-item>
              <el-button
                icon="el-icon-check"
                type="primary"
                @click="
                  handerUpdateFormulaSpecifications('formulaSpecificationsForm')
                "
                >{{ $t("提交编辑") }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </dic>

    <!-- 第三个弹框-编辑配方规格原料数据配比 -->
    <dic class="dialogCenter">
      <el-dialog
        :title="$t('编辑规格设置')"
        :visible.sync="dialogVisible3"
        width="40%"
        :before-close="handleClose"
        :close-on-click-modal="false"
      >
        <!-- 表单内容 -->
        <div>
          <el-form
            :model="formulaDataProportioningForm"
            :rules="rulesFormulaDataProportioning"
            ref="formulaDataProportioningForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item :label="$t('原料名称')" >
              {{formulaDataProportioningForm.materialName}}
            </el-form-item>

            <el-form-item  :label="$t('原料组合')" prop="groupName">
              <el-select :disabled="true" clearable filterable v-model="formulaDataProportioningForm.groupName" placeholder="选择组合(默认自己一组)">
                <el-option
                    v-for="item in formulaSpecificationsDataProportioningList"
                    :key="item.groupName"
                    :label="item.lumiereFormulaMaterial.materialName"
                    :value="item.groupName"
                    :disabled="item.materialType!=formulaDataProportioningForm.materialType">
                  <span style="float: left">{{ item.lumiereFormulaMaterial.materialName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.materialType == 1 ?'辅料':'主料' }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item  v-show="type==1" :label="$t('原料类型')" prop="consumeSystem">
              <el-select
                :disabled="true"
                v-model="formulaDataProportioningForm.materialType"
                clearable
                class="filter-item"
                :placeholder="$t('请选择原料类型')"
              >
                <el-option
                  v-for="item in materialTypeList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.type"
                ></el-option>
              </el-select>
              <span :style="{fontSize:'12px',color:'#a8a9a9'}">{{ $t('说明:原料类型不可修改，已存在组') }}</span>
            </el-form-item>

            <el-form-item v-show="type==1" :label="$t('规格剂量')" prop="specificationsDose">
              <el-input-number controls-position="right"
                  v-model="formulaDataProportioningForm.specificationsDose"
                  :placeholder="$t('请输入规格剂量')" :precision="2" :step="1" ></el-input-number>
            </el-form-item>

            <el-form-item :label="$t('价格')" prop="quantity">
              <el-input-number v-model="formulaDataProportioningForm.price" controls-position="right"
                               :placeholder="$t('请输入价格')" :precision="2" :step="0.1" :min="0" >

              </el-input-number>
            </el-form-item>

            <el-form-item :label="$t('单位')" prop="unit">
              <el-input
                disabled
                v-model="formulaDataProportioningForm.unit"
                :placeholder="$t('请输入单位')"
              ></el-input>
            </el-form-item>

            <el-form-item v-show="type==1" :label="$t('数量')" prop="quantity">
              <el-input
                v-model="formulaDataProportioningForm.quantity"
                :placeholder="$t('请输入数量')"
              ></el-input>
            </el-form-item>

            <el-form-item v-show="this.type===1" :label="$t('制作单位')" prop="makeUnit">
              <el-input v-model="formulaDataProportioningForm.makeUnit"></el-input>
            </el-form-item>

            <el-form-item v-show="formulaDataProportioningForm.materialType == 1" :label="$t('计费条件')" prop="chargingCondition">
              <el-input
                  style="flex: 1"
                  v-model="formulaDataProportioningForm.chargingCondition"
                  :placeholder="$t('请输入计费条件')"
              >
                <template slot="prepend">{{$t('大于')}}</template>
              </el-input>
            </el-form-item>

            <el-form-item v-show="formulaDataProportioningForm.materialType == 1" :label="$t('额外收费')" prop="surcharge">
              <el-input
                v-model="formulaDataProportioningForm.surcharge"
                :placeholder="$t('请输入额外收费')"
              ></el-input>
            </el-form-item>

            <el-form-item v-show="formulaDataProportioningForm.materialType == 1" :label="$t('数量上限')" prop="quantityRestrict">
              <el-input
                v-model="formulaDataProportioningForm.quantityRestrict"
                :placeholder="$t('请输入数量上限')"
              ></el-input>
            </el-form-item>


<!--            <el-form-item :label="$t('消耗系数')" prop="consumeSystem">
              <el-select v-model="formulaDataProportioningForm.consumeSystem" placeholder="请输入消耗系数">
                <el-option
                  v-for="item in consumeSystemOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>-->

            <el-form-item v-show="type==1" :label="$t('消耗系数')" prop="consumeSystem">
              <el-input
                placeholder="请输入消耗系数"
                v-model="formulaDataProportioningForm.consumeSystem"
                @input="validateDecimalInput"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>

            <el-form-item v-show="formulaDataProportioningForm.materialType == 1" :label="$t('计费方式')" prop="chargingMode">
              <el-select
                filterable
                v-model="formulaDataProportioningForm.chargingMode"
                @clear="handleFilter"
                :placeholder="$t('状态')"
                clearable
              >
                <el-option :label="$t('按份计费')" :value="1"></el-option>
                <el-option :label="$t('按次计费')" :value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-show="type==1" :label="$t('是否显示')">
              <el-switch
                  v-model="formulaDataProportioningForm.isDisplay"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-text="$t('是')"
                  :inactive-text="$t('否')"
              >
              </el-switch>
            </el-form-item>

            <el-form-item :label="$t('是否默认原配方')">
              <el-switch
                  v-model="formulaDataProportioningForm.isDefault"
                  active-color="#13ce66"
                  @change="handleIsDefault"
                  inactive-color="#ff4949"
                  :active-text="$t('是')"
                  :inactive-text="$t('否')"
              >
              </el-switch>
            </el-form-item>


            <el-form-item>
              <el-button
                icon="el-icon-check"
                type="primary"
                @click="
                  handerUpdateFormulaSpecificationsDataProportioning(
                    'formulaDataProportioningForm'
                  )
                "
                >{{ $t("提交编辑") }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </dic>

    <!-- 第三个弹框-添加配方规格原料数据配比 -->
    <div class="dialogCenter">
      <el-dialog
          :title="$t('添加原料')"
          :visible.sync="dialogAddMaterialVisible"
          width="40%"
          :before-close="handleClose"
          :close-on-click-modal="false"
      >
        <!-- 表单内容 -->
        <div>
          <el-alert
              show-icon center
              title="原料组合说明: 选择组合后可实现替换效果，用户单选其一原料(不选则单独一组)"
              type="info">
          </el-alert><br/>

          <el-form
              :model="formulaDataProportioningForm"
              :rules="rulesFormulaDataProportioning"
              ref="formulaDataProportioningForm"
              label-width="120px"
              class="demo-ruleForm"
          >
            <el-form-item v-show="this.type===1" :label="$t('原料类型')" prop="consumeSystem">
              <el-select
                v-model="formulaDataProportioningForm.materialType"
                clearable
                @change="handlerFormulaMaterialTypeChange"
                class="filter-item"
                :placeholder="$t('请选择原料类型')"
              >
                <el-option
                  v-for="item in materialTypeList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.type"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item  :label="$t('原料分类')" >
              <el-select
                  filterable
                  :disabled="this.formulaDataProportioningForm.materialType==undefined"
                v-model="formulaDataProportioningForm.materialClassificationId"
                @change="handleMaterialListGroupByChange"
                :placeholder="$t('请选择原料分类')"
              >
                <el-option
                  v-for="item in materialClassificationListGroupBy"
                  :key="item.id"
                  :value="item.id"
                  :label="item.classificationName"
                >
                  <span style="float: left">{{ item.classificationName }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item   :label="$t('原料名称')" prop="consumeSystem">
              <el-select :disabled="formulaDataProportioningForm.materialClassificationId==undefined||formulaDataProportioningForm.materialClassificationId==''"  @change="handlerSelectFormulaMaterialChange" filterable multiple collapse-tags v-model="formulaDataProportioningForm.formulaMaterialIds" placeholder="选择原料">
                <el-option
                    v-for="item in formulaMaterialListAll"
                    :key="item.id"
                    :label="item.materialName"
                    :disabled="item.disabled"
                    :value="item.id">
                  <span style="float: left">{{ item.materialName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.standard }} - {{ item.property }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item  :label="$t('原料组合')" prop="groupName">
              <el-select filterable @clear="handleGroupNameClear" clearable v-model="formulaDataProportioningForm.groupName" placeholder="选择组合(默认自己一组)">
                <el-option
                    :disabled="item.materialType != formulaDataProportioningForm.materialType"
                    v-for="item in formulaSpecificationsDataProportioningList"
                    :key="item.id"
                    :label="item.lumiereFormulaMaterial.materialName"
                    :value="item.id">
                  <span style="float: left">{{ item.lumiereFormulaMaterial.materialName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.materialType == 1 ?'辅料':'主料' }}</span>
                </el-option>
              </el-select>
              <el-switch
                v-show="formulaDataProportioningForm.groupName==undefined||formulaDataProportioningForm.groupName==''"
                v-model="formulaDataProportioningForm.loneliness"
                active-text="分组"
                inactive-text="组合"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>

            <el-form-item v-show="this.type===1" :label="$t('规格剂量')" prop="specificationsDose">
              <el-input-number controls-position="right"
                               v-model="formulaDataProportioningForm.specificationsDose"
                               :placeholder="$t('请输入规格剂量')" :precision="2" :step="1" >
              </el-input-number>
            </el-form-item>

            <el-form-item v-show="this.type===1" :label="$t('价格')" prop="price">
              <el-input-number v-model="formulaDataProportioningForm.price" controls-position="right"
                               :placeholder="$t('请输入价格')" :precision="2" :step="0.1" :min="0.0" >

              </el-input-number>
            </el-form-item>

            <el-form-item :label="$t('单位')">
              <el-input
                disabled
                v-model="formulaDataProportioningForm.units"
                :placeholder="$t('请输入单位')"
              ></el-input>
            </el-form-item>

            <el-form-item v-show="this.type===1" :label="$t('数量')" prop="quantity">
              <el-input
                  v-model="formulaDataProportioningForm.quantity"
                  :placeholder="$t('请输入数量')"
              ></el-input>
            </el-form-item>

            <el-form-item v-show="this.type===1" :label="$t('制作单位')" prop="makeUnit">
              <el-input v-model="formulaDataProportioningForm.makeUnit"></el-input>
            </el-form-item>
            <el-form-item v-show="this.type===1&&this.formulaDataProportioningForm.materialType===1" :label="$t('计费条件')" prop="chargingCondition">
              <el-input
                  style="flex: 1"
                  v-model="formulaDataProportioningForm.chargingCondition"
                  :placeholder="$t('请输入计费条件')"
              >
                <template slot="prepend">{{$t('大于')}}</template>
              </el-input>
            </el-form-item>

            <el-form-item v-show="this.type===1&&this.formulaDataProportioningForm.materialType===1" :label="$t('额外收费')" prop="surcharge">
              <el-input
                  v-model="formulaDataProportioningForm.surcharge"
                  :placeholder="$t('请输入额外收费')"
              ></el-input>
            </el-form-item>

            <el-form-item v-show="this.type===1&&this.formulaDataProportioningForm.materialType===1" :label="$t('数量上限')" prop="quantityRestrict">
              <el-input
                  v-model="formulaDataProportioningForm.quantityRestrict"
                  :placeholder="$t('请输入数量上限')"
              ></el-input>
            </el-form-item>



            <el-form-item v-show="this.type===1" :label="$t('消耗系数')" prop="consumeSystem">
              <el-input
                placeholder="请输入消耗系数"
                v-model="formulaDataProportioningForm.consumeSystem"
                @input="validateDecimalInput"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item  v-show="this.type===1&&this.formulaDataProportioningForm.materialType===1" :label="$t('计费方式')" prop="chargingMode">
              <el-select
                  filterable
                  v-model="formulaDataProportioningForm.chargingMode"
                  @clear="handleFilter"
                  :placeholder="$t('状态')"
                  clearable
              >
                <el-option :label="$t('按份计费')" :value="1"></el-option>
                <el-option :label="$t('按次计费')" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item  :label="$t('是否显示')">
              <el-switch
                  v-model="formulaDataProportioningForm.isDisplay"
                  :disabled="formulaDataProportioningForm.isDefault"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-text="$t('是')"
                  :inactive-text="$t('否')"
              >
              </el-switch>
            </el-form-item>

            <el-form-item v-show="false" :label="$t('是否默认原配方')">
              <el-switch
                  v-model="formulaDataProportioningForm.isDefault"
                  @change="handleIsDefault"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-text="$t('是')"
                  :inactive-text="$t('否')"
              >
              </el-switch>
            </el-form-item>

            <el-form-item v-show="false" :label="$t('是否同步')">
              <el-switch
                  v-model="formulaDataProportioningForm.sync"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-text="$t('是')"
                  :inactive-text="$t('否')"
              >
              </el-switch>
            </el-form-item>

            <el-form-item>
              <el-button
                  v-if="!formulaDataProportioningForm"
                  icon="el-icon-check"
                  type="primary"
                  @click="
                  handerUpdateFormulaSpecificationsDataProportioning(
                    'formulaDataProportioningForm'
                  )
                "
              >{{ $t("提交编辑") }}</el-button
              >
              <el-button
                  v-else
                  icon="el-icon-check"
                  type="primary"
                  @click="
                  handerSaveFormulaSpecificationsDataProportioning(
                    'formulaDataProportioningForm'
                  )
                "
              >{{ $t("提交新增") }}</el-button
              >

              <el-button
                  v-show="type==1"
                  icon="el-icon-refresh"
                  @click="resetFormulaSpecificationsDataProportioningForm('formulaDataProportioningForm')
                "
              >{{ $t("重置") }}</el-button
              >

              <el-button
                v-show="formulaDataProportioningForm.materialType==1"
                  icon="el-icon-setting"
                  @click="handlerFormulaMaterialDefaultValue(formulaDataProportioningForm)
                "
              >{{ $t("设置默认") }}</el-button
              >

            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <p>
        <el-alert center type="success">
          小提示 : 标记 <i :style="{'color': '#13ce66'}" class="el-icon-success"></i>
          表示组内默认原料，请保证每组都有默认原料、和默认原料。
        </el-alert><br/>
        <el-alert center type="info">
          小提示 : 添加、同步原料 <i :style="{'color': '#13ce66'}" class="el-icon-goblet-square"></i>
          同步原料成功，请修改[规格]的原料规格设置！
        </el-alert><br/>
        <el-alert center type="warning">
          小提示 : 规格同步原料  <i :style="{color:'red'}" class="el-icon-edit"></i>
          同步原料成功未编辑，请修改原料参数！
        </el-alert>

      </p>
    </div>
  </div>
</template>


    <script>
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { listType, add, update, deleteById } from "@/api/formulaType";
import { listFormulaGroupBy} from "@/api/materialClassification";
import {
  listFormulaSpecifications,
  addFormulaSpecifications,
  updateFormulaSpecifications,
  deleteFormulaSpecifications,
} from "@/api/formulaSpecifications";
import {
  listFormulaSpecificationsDataProportioning,
  addFormulaSpecificationsDataProportioning,
  updateFormulaSpecificationsDataProportioning,
  deleteFormulaSpecificationsDataProportioning,
} from "@/api/formulaSpecificationsDataProportioning";
import { getToken } from "@/utils/auth";
import { uploadPath } from "@/api/storage";
import {
  listAllFormulaMaterial,listMultipleLumiereFormulaMaterial
} from "@/api/formulaMaterial";
export default {
  name: "formulaSpecifications",
  components: { Pagination },
  computed: {
    headers() {
      return {
        "X-Litemall-Admin-Token": getToken(),
      };
    },
  },
  data() {
    return {
      //消耗系数
      consumeSystemOptions:[
        {
          value: 0.0,
          label: 0.0,
        },
        {
          value: 0.1,
          label: 0.1,
        },
        {
          value: 0.2,
          label: 0.2,
        },
        {
          value: 0.3,
          label: 0.3,
        },
        {
          value: 0.4,
          label: 0.4,
        },
        {
          value: 0.5,
          label: 0.5,
        },
        {
          value: 0.6,
          label: 0.6,
        },
        {
          value: 0.7,
          label: 0.7,
        },
        {
          value: 0.8,
          label: 0.8,
        },
        {
          value: 0.9,
          label: 0.9,
        },
        {
          value: 1.0,
          label: 1.0,
        },
      ],
      //单位虚拟库
      unitOptions: [
        {
          value: "ml",
          label: "ml",
        },
        {
          value: "Portion",
          label: "Portion",
        },
        {
          value: "Pumps",
          label: "Pumps",
        },
        {
          value: "ea",
          label: "ea",
        },
        {
          value: "g",
          label: "g",
        },
      ],
      uploadPath,
      //配方的id
      formulaId: undefined,
      type:undefined,

      //原料ids
      formulaMaterialIds: [],
      activeName: "first",

      list: [],
      radio: '',
      listFormulaSpecifications: [],
      formulaSpecificationsDataProportioningList: [],
      total: 0,
      listLoading: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,

      //添加原料
      dialogAddMaterialVisible: false,
      formulaMaterialListAll: [],

      //原料所有分类
      materialClassificationListGroupBy:[],
      materialTypeList: [
        {
          id: 0,
          type: "主料",
        },
        {
          id: 1,
          type: "辅料",
        },
      ],

      //添加规格传来的配方原料所有数据
      formulaMaterialList: [],

      dialogStatus: "",
      color: "#409EFF",
      listQuery: {
        page: 1,
        limit: 10,
        classificationName: undefined,
      },
      listQueryFormulaSpecifications: {
        page: 1,
        limit: 10,
        formulaId: undefined,
      },
      formulaSpecificationsForm: {
        id: undefined,
        formulaId: undefined,
        specificationsName: undefined,
        specificationsValue: undefined,
        specificationsImg: undefined,
        specificationsPrice: undefined,
        isDefault: undefined,
        formulaMaterialIds: undefined,
        sync:false,
      },
      formulaDataProportioningForm: {
        id: undefined,
        formulaSpecificationsId: undefined,
        formulaMaterialId: undefined,
        unit: undefined,

        formulaMaterialIds: [],
        units: [],

        materialClassificationId:undefined,
        materialClassificationName:undefined,
        specificationsDose: undefined,
        materialType:undefined,
        quantity: undefined,
        price: undefined,
        chargingCondition: undefined,
        chargingConditionNumber: undefined,
        quantityRestrict: undefined,

        materialId: undefined,
        materialName: undefined,
        makeUnit: undefined,
        groupName: undefined,
        loneliness:false,
        chargingMode: undefined,
        isDisplay:true,
        isDefault:false,
        surcharge: undefined,
        consumeSystem: undefined,
        sync:true,
      },
      formulaTypeForm: {
        id: undefined,
        formulaTypeName: undefined,
        typeColour: "#000000",
        number: undefined,
        remark: undefined,
      },
      options: [
        {
          value: ">",
          label: "大于",
        }
      ],
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],

      rules: {
        formulaTypeName: [
          {
            required: true,
            message: "请输入配方类型名称",
            trigger: "blur",
          },
        ],
        typeColour: [
          {
            required: true,
            message: "请输入类型颜色",
            trigger: "blur",
          },
        ],
      },
      //规格验证
      rulesSpecifications: {
        specificationsName: [
          {
            required: true,
            message: "请输入规格名称",
            trigger: "blur",
          },
        ],
        specificationsValue: [
          {
            required: true,
            message: "请输入规格值",
            trigger: "blur",
          },
        ],
        specificationsPrice: [
          {
            required: true,
            message: "请输入规格价格",
            trigger: "blur",
          },
        ],
      },
      //配方原料数据配比验证
      rulesFormulaDataProportioning: {
        specificationsDose: [
          {
            required: true,
            message: "请输入规格剂量",
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "请输入价格",
            trigger: "blur",
          },
        ],
        quantity: [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur",
          },
        ],
        surcharge: [
          {
            required: true,
            message: "请输入额外收费",
            trigger: "blur",
          },
        ],
        quantityRestrict: [
          {
            required: true,
            message: "请输入数量上限",
            trigger: "blur",
          },
        ],
        chargingCondition: [
          {
            required: true,
            message: "请输入计费条件",
            trigger: "blur",
          },
        ],
        unit: [
          {
            required: true,
            message: "请输入单位",
            trigger: "blur",
          },
        ],
        consumeSystem: [
          {
            required: true,
            message: "请输入消耗系数",
            trigger: "blur",
          },
        ],
        chargingMode: [
          {
            required: true,
            message: "请输入计费方式",
            trigger: "blur",
          },
        ],
        makeUnit: [
          {
            required: true,
            message: "请输入制作单位",
            trigger: "blur",
          },
        ],

      },
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    async init() {
      this.formulaMaterialList = this.$route.query.formulaMaterialList;

      //配方的id
      this.formulaId = this.$route.query.formulaId;
      //配方类型原料 物品
      this.type = this.$route.query.type;

      this.formulaMaterialIds = this.formulaMaterialList.reduce(
        (acc, curr, index) => {
          acc[`formulaMaterialIds[${index}]`] = curr.id;
          return acc;
        },
        {}
      );

      this.getList();
      this.getListFormulaSpecificationsInit();
      this.getListGroupBy();
    },
    getList() {
      this.listLoading = true;
      listType(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    getIndex(index) {
      return index + 1 + (this.listQuery.page - 1) * this.listQuery.limit;
    },
    handleFilter() {
      this.getList();
    },
    handerCreate() {
      this.dialogVisible1 = true;
      this.dialogStatus = "create";
      this.formulaTypeForm = {
        id: undefined,
        formulaTypeName: undefined,
        typeColour: "#000000",
        number: undefined,
        remark: undefined,

      };
    },
    handerCreateSubclass(row) {
      this.dialogVisible1 = true;
      this.dialogStatus = "create";
    },
    handleResetFormulaDataProportioningForm(){
      this.formulaDataProportioningForm = {
        id: undefined,
        formulaSpecificationsId: undefined,
        formulaMaterialId: undefined,
        materialClassificationName:undefined,
        specificationsDose: undefined,
        materialType:undefined,
        quantity: undefined,
        price: undefined,
        chargingCondition: undefined,
        chargingConditionNumber: undefined,
        quantityRestrict: undefined,
        unit: undefined,
        materialName: undefined,
        groupName: undefined,
        chargingMode: undefined,
        isDisplay:true,
        isDefault:false,
        surcharge: undefined,
        consumeSystem: undefined,
        loneliness:false,
        formulaMaterialIds: [],
        units: [],
        makeUnit: undefined
      }
    },
    handleClose(done) {
      //this.$refs['formulaDataProportioningForm'].resetFields();
      this.handleResetFormulaDataProportioningForm()
      this.getList();
      done();
    },
    handerEdit(row) {
      this.dialogVisible2 = true;
      this.dialogStatus = "update";
      //   this.formulaTypeForm = row;
      this.formulaTypeForm.id = row.id;
      this.formulaTypeForm.formulaTypeName = row.formulaTypeName;
      this.formulaTypeForm.typeColour = row.typeColour;
      this.formulaTypeForm.number = row.number;
      this.formulaTypeForm.remark = row.remark;
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.formulaTypeForm)
            .then((res) => {
              if (res.data.data == 100) {
                this.$notify({
                  title: "警告",
                  message: "这是一条警告的提示消息",
                  type: "warning",
                });
              } else {
                this.dialogVisible1 = false;
                this.$notify({
                  title: "成功",
                  message: "添加成功",
                  type: "success",
                });
                this.$refs["formulaTypeForm"].resetFields();
                this.getList();
              }
            })
            .catch(() => {
              this.$notify.error({
                title: "错误",
                message: "创建失败",
              });
            });
        } else {
          return false;
        }
      });
    },

    editCardClassification(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update(this.formulaTypeForm)
            .then((res) => {
              this.dialogVisible2 = false;
              this.$notify({
                title: "成功",
                message: "编辑成功",
                type: "success",
              });
              this.getList();
            })
            .catch(() => {
              this.$notify.error({
                title: "错误",
                message: "编辑失败",
              });
            });
        } else {
          return false;
        }
      });
    },

    handerDelete(row) {
      console.log(1231123321);
      console.log(row);
      console.log(row.id);
      var id = row.id;
      var formulaTypeForm = {
        id: row.id,
      };
      //   if (row.classificationStatus == 0) {
      //     this.$notify({
      //       title: "警告",
      //       message: "该分类已启动！",
      //       type: "warning",
      //     });
      //     return;
      //   }
      this.$confirm("确认删除？")
        .then((_) => {
          deleteById(formulaTypeForm)
            .then((res) => {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
              });
              this.getList();
            })
            .catch((res) => {
              this.$notify.error({
                title: "错误",
                message: "删除失败",
              });
            });
        })
        .catch((_) => {});
    },

    //切换规格
    handleClick(tab, event) {

      this.getFormulaSpecificationsDataProportioning(tab.name);

      this.formulaDataProportioningForm.formulaSpecificationsId = parseInt(
        tab.name,
        10
      );
      console.log('@@@',tab.name);
      // var formulaSpecificationsDataProportioning = {
      //   page: 1,
      //   limit: 10,
      //   formulaSpecificationsId: parseInt(tab.name, 10),
      // };
      // listFormulaSpecificationsDataProportioning(
      //   formulaSpecificationsDataProportioning
      // )
      //   .then((response) => {
      //     this.formulaSpecificationsDataProportioningList =
      //       response.data.data.list;
      //     this.listLoading = false;
      //   })
      //   .catch(() => {
      //     this.formulaSpecificationsDataProportioningList = [];
      //     this.listLoading = false;
      //   });
    },

    getFormulaSpecificationsDataProportioning(formulaSpecificationsId) {
      var formulaSpecificationsDataProportioning = {
        page: 1,
        limit: 10,
        formulaSpecificationsId: parseInt(formulaSpecificationsId, 10),
      };
      listFormulaSpecificationsDataProportioning(
        formulaSpecificationsDataProportioning
      )
        .then((response) => {
          this.formulaSpecificationsDataProportioningList =
            response.data.data;
          this.listLoading = false;
        })
        .catch(() => {
          this.formulaSpecificationsDataProportioningList = [];
          this.listLoading = false;
        });
      console.log('hhh',this.formulaSpecificationsDataProportioningList)
    },

     goBack() {
       console.log("go back");
       this.$router.go(-1); // 回到上一个页面
       window.close();
     },

    //查询规格
    getListFormulaSpecifications() {
      this.listLoading = true;
      this.listQueryFormulaSpecifications.formulaId = this.formulaId;
      listFormulaSpecifications(this.listQueryFormulaSpecifications)
        .then((response) => {
          this.listFormulaSpecifications = response.data.data.list;
          this.listLoading = false;
        })
        .catch(() => {
          this.listFormulaSpecifications = [];
          this.listLoading = false;
        });
    },

    //初始化查询规格
    getListFormulaSpecificationsInit() {
      this.listLoading = true;
      this.listQueryFormulaSpecifications.formulaId = this.formulaId;
      listFormulaSpecifications(this.listQueryFormulaSpecifications)
        .then((response) => {
          ////debugger;
          this.listFormulaSpecifications = response.data.data.list;
          this.activeName = this.listFormulaSpecifications[0].id + "";
          this.handleClick(
            { name: this.listFormulaSpecifications[0].id },
            null
          );
          this.listLoading = false;
        })
        .catch(() => {
          this.listFormulaSpecifications = [];
          this.listLoading = false;
        });
    },

    //添加规格之后查询规格(锁定在那一个)
    getListFormulaSpecificationsLock(id) {
      this.listLoading = true;
      this.listQueryFormulaSpecifications.formulaId = this.formulaId;
      listFormulaSpecifications(this.listQueryFormulaSpecifications)
        .then((response) => {
         // //debugger;
          this.listFormulaSpecifications = response.data.data.list;
          this.activeName = id + "";
          this.handleClick(
            { name: id },
            null
          );
          this.listLoading = false;
        })
        .catch(() => {
          this.listFormulaSpecifications = [];
          this.listLoading = false;
        });
    },

    //规格设置打开窗口
    handerCreateFormulaSpecifications() {
      this.dialogVisible1 = true;
      this.formulaSpecificationsForm = {
        id: undefined,
        formulaId: this.formulaId,
        specificationsName: undefined,
        specificationsValue: undefined,
        specificationsImg: undefined,
        specificationsPrice: undefined,
        isDefault: false,
        sync: false,
        formulaMaterialIds: Object.values(this.formulaMaterialIds),
      };
    },

    //添加规格
    submitAddFormulaSpecifications(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addFormulaSpecifications(this.formulaSpecificationsForm)
            .then((res) => {
              if (res.data.data == 100) {
                this.$notify({
                  title: "警告",
                  message: "这是一条警告的提示消息",
                  type: "warning",
                });
              } else {
                this.dialogVisible1 = false;
                this.$notify({
                  title: "成功",
                  message: "添加成功",
                  type: "success",
                });
                //同步提示修改
                if(this.formulaSpecificationsForm.sync){
                  this.$confirm('同步原料成功，请修改['+this.formulaSpecificationsForm.specificationsName+'规格]的原料规格设置！', '提示', {
                    confirmButtonText: '知道了',
                    cancelButtonText: '取消',
                    type: 'success'
                  }).then(() => {
                  }).catch(() => {
                  });
                }
                this.getListFormulaSpecificationsLock(res.data.data);
                this.$refs["formulaSpecificationsForm"].resetFields();
              }
            })
            .catch(() => {
              this.$notify.error({
                title: "错误",
                message: "创建失败",
              });
            });
        } else {
          return false;
        }
      });
    },

    //删除规格
    handerDeleteFormulaSpecifications(row) {
      var formulaSpecificationsForm = {
        id: row.id,
      };
      this.$confirm("确认删除？")
        .then((_) => {
          deleteFormulaSpecifications(formulaSpecificationsForm)
            .then((res) => {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
              });
              this.getListFormulaSpecificationsInit();
            })
            .catch((res) => {
              this.$notify.error({
                title: "错误",
                message: "删除失败",
              });
            });
        })
        .catch((_) => {});
    },

    //编辑规格弹窗
    handerEditFormulaSpecifications(row) {
      this.dialogVisible2 = true;
      this.formulaSpecificationsForm.id = row.id;
      this.formulaSpecificationsForm.formulaId = row.formulaId;
      this.formulaSpecificationsForm.specificationsName =
        row.specificationsName;
      this.formulaSpecificationsForm.specificationsValue =
        row.specificationsValue;
      this.formulaSpecificationsForm.specificationsImg = row.specificationsImg;
      this.formulaSpecificationsForm.specificationsPrice =
        row.specificationsPrice;
      this.formulaSpecificationsForm.isDefault = row.isDefault;
      this.formulaSpecificationsForm.formulaMaterialIds = undefined;
    },

    //编辑规格
    handerUpdateFormulaSpecifications(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateFormulaSpecifications(this.formulaSpecificationsForm)
            .then((res) => {
              this.dialogVisible2 = false;
              this.$notify({
                title: "成功",
                message: "编辑成功",
                type: "success",
              });
              this.getListFormulaSpecifications();
            })
            .catch(() => {
              this.$notify.error({
                title: "错误",
                message: "编辑失败",
              });
            });
        } else {
          return false;
        }
      });
    },

    // getNumberFromComparisonString(str) {
    //   // 使用正则表达式提取数字
    //   const match = str.match(/-?\d+(\.\d+)?/); // 匹配整数和浮点数，包括负数
    //   if (match) {
    //     return parseFloat(match[0]); // 将匹配到的字符串转换为浮点数
    //   }
    //   return null; // 如果没有匹配到数字，返回 null
    // },

    //分割特殊字符和数字
    getNumberAndSymbolFromComparisonString(str) {
      // 检查输入是否为非空字符串
      if (typeof str !== "string" || str.trim() === "") {
        return { number: null, symbol: null };
      }

      // 使用正则表达式分别提取符号和数字
      const symbolMatch = str.match(/[<>=!]+/); // 匹配符号
      const numberMatch = str.match(/-?\d+(\.\d+)?/); // 匹配整数和浮点数，包括负数

      // 提取符号和数字
      const symbol = symbolMatch ? symbolMatch[0] : null;
      const number = numberMatch ? parseFloat(numberMatch[0]) : null;
      return { number, symbol };
    },

    // 设置单选主要代码
    /*handleSelectionChange(val) {
      // 单选
      if(val.length == 1){
        this.formulaDataProportioningForm = val[val.length -1];
        this.dialogAddMaterialVisible = true;
      }

      // 单选选中多条时，需要清空所选数据
      if(val.length > 1){
        this.$refs.multipleTable.clearSelection(); // 清空选项
        this.$refs.multipleTable.toggleRowSelection(val.pop()); // 选中最后点击的数据
      }

    },*/
    /*getCurrentRow(row){
      // 获取选中数据   row表示选中这一行的数据，可以从里面提取所需要的值
      this.formulaDataProportioningForm = row
      this.formulaDataProportioningForm.id = undefined
    },*/
    //新增规格原料数据配比弹窗
    handlerAddFormulaSpecificationsDataProportioning(item){
      this.dialogAddMaterialVisible = true;
      this.formulaDataProportioningForm.isDisplay = true
      this.formulaDataProportioningForm.formulaSpecificationsId =
          item.formulaSpecificationsId;

      if(this.type==2){
        this.formulaDataProportioningForm.materialType= 0;
        this.formulaDataProportioningForm. specificationsDose= 0;
        this.formulaDataProportioningForm.quantity= 1;
        this.formulaDataProportioningForm.surcharge= 0;
        this.formulaDataProportioningForm. quantityRestrict= 1;
        this.formulaDataProportioningForm. chargingMode= 1;
        this.formulaDataProportioningForm.chargingCondition= 0;
        this.formulaDataProportioningForm.  consumeSystem= 0;
        this.formulaDataProportioningForm. price = 0.0;
        this.formulaDataProportioningForm.makeUnit = ' ';
      }
      //this.handlerFormulaMaterialDefaultValue(this.formulaDataProportioningForm)
    },

    resetFormulaSpecificationsDataProportioningForm(formName) {
      this.handleResetFormulaDataProportioningForm()
      this.$refs[formName].resetFields();
    },
    validateDecimalInput() {
      // 使用正则表达式限制输入只为小数或整数
      let value = this.formulaDataProportioningForm.consumeSystem;
      // 只允许数字和小数点（包括小数点后最多一位）
      value = value.replace(/[^\d.]/g, '')    // 移除非数字和小数点的字符
        .replace(/^\./, '')                   // 防止以小数点开头
        .replace(/\.{2,}/, '.')               // 防止连续输入多个小数点
        .replace('.', '$#$').replace(/\./g, '') // 只允许一个小数点
        .replace('$#$', '.');                 // 恢复小数点
      this.formulaDataProportioningForm.consumeSystem = value;
    },
    //主料自动设置
    handlerFormulaMaterialTypeChange(){
      if(this.formulaDataProportioningForm.materialClassificationId!=undefined){
        this.handleMaterialListGroupByChange(this.formulaDataProportioningForm.materialClassificationId)
      }
      if(this.formulaDataProportioningForm.materialType===0){
        this.handlerFormulaMaterialDefaultValue(this.formulaDataProportioningForm)
      }
    },
    //主料默认值
    handlerFormulaMaterialDefaultValue(formulaDataProportioningForm){
      this.formulaDataProportioningForm.price = 0
      this.formulaDataProportioningForm.chargingCondition = 1
      this.formulaDataProportioningForm.surcharge = 0
      this.formulaDataProportioningForm.quantityRestrict = 1
      this.formulaDataProportioningForm.chargingMode = 0
    },

    getListGroupBy(){
      listFormulaGroupBy()
        .then((response) => {
          this.materialClassificationListGroupBy = response.data.data;
        })
        .catch(() => {
          this.materialClassificationListGroupBy = [];
        });
    },
    //清除组合
    handleGroupNameClear(){
      this.formulaDataProportioningForm.loneliness = false
    },
    handleMaterialListGroupByChange(selectedClassificationId) {
      this.formulaDataProportioningForm.units = []
      this.formulaDataProportioningForm.formulaMaterialIds = []

      listMultipleLumiereFormulaMaterial({materialClassificationId:selectedClassificationId
        ,formulaSpecificationsId:this.formulaDataProportioningForm.formulaSpecificationsId,
        groupName:this.formulaDataProportioningForm.groupName,
        materialType:this.formulaDataProportioningForm.materialType}).then(response => {
        this.formulaMaterialListAll = response.data.data;
      })
    },
    //选择原料的事件
    handlerSelectFormulaMaterialChange(changeVal){
      this.formulaDataProportioningForm.units = []
      changeVal.forEach(material=>{
        let selectFormulaMaterial = this.formulaMaterialListAll.find((item) => item.id == material);
        this.formulaDataProportioningForm.units.push(selectFormulaMaterial.unit)
      })

    },

    //编辑规格原料数据配比弹窗
    handerEditFormulaSpecificationsDataProportioning(row) {
      this.dialogVisible3 = true;
      this.formulaDataProportioningForm.id = row.id;
      this.formulaDataProportioningForm.formulaSpecificationsId = row.formulaSpecificationsId
      this.formulaDataProportioningForm.materialType = row.materialType;
      this.formulaDataProportioningForm.specificationsDose =
        row.specificationsDose;
      this.formulaDataProportioningForm.quantity = row.quantity;

      this.formulaDataProportioningForm.chargingCondition = row.chargingCondition;
      this.formulaDataProportioningForm.price = row.price;
      this.formulaDataProportioningForm.surcharge = row.surcharge;
      this.formulaDataProportioningForm.quantityRestrict = row.quantityRestrict;
      //单位是根据原料同步过来的
      this.formulaDataProportioningForm.unit = row.lumiereFormulaMaterial.unit;
      this.formulaDataProportioningForm.materialName = row.lumiereFormulaMaterial.materialName
      this.formulaDataProportioningForm.chargingMode = row.chargingMode;
      this.formulaDataProportioningForm.consumeSystem = row.consumeSystem;

      this.formulaDataProportioningForm.groupName = row.groupName;
      this.formulaDataProportioningForm.isDisplay = row.isDisplay;
      this.formulaDataProportioningForm.isDefault = row.isDefault;

      this.formulaDataProportioningForm.formulaMaterialId = row.formulaMaterialId;
      this.formulaDataProportioningForm.makeUnit = row.makeUnit;

    },
    handleIsDefault(){
      this.formulaDataProportioningForm.isDisplay = true;
    },
    //编辑规格原料数据配比
    handerUpdateFormulaSpecificationsDataProportioning(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            updateFormulaSpecificationsDataProportioning(
              this.formulaDataProportioningForm
            )
              .then((res) => {
                this.dialogVisible3 = false;
                this.$notify({
                  title: "成功",
                  message: "编辑成功",
                  type: "success",
                });
                this.getFormulaSpecificationsDataProportioning(
                  this.formulaDataProportioningForm.formulaSpecificationsId
                );
                this.handleResetFormulaDataProportioningForm()
              })
              .catch(() => {
                this.$notify.error({
                  title: "错误",
                  message: "编辑失败",
                });
              });

        } else {
          return false;
        }
      });
    },

    //编辑规格原料数据配比
    handerSaveFormulaSpecificationsDataProportioning(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            addFormulaSpecificationsDataProportioning(
                this.formulaDataProportioningForm
            )
                .then((res) => {
                  this.dialogVisible3 = false;
                  this.$notify({
                    title: "成功",
                    message: "添加成功",
                    type: "success",
                  });
                  this.dialogAddMaterialVisible = false;
                  this.getFormulaSpecificationsDataProportioning(
                      this.formulaDataProportioningForm.formulaSpecificationsId
                  );

                  this.handleResetFormulaDataProportioningForm()
                })
                .catch(() => {
                  this.$notify.error({
                    title: "错误",
                    message: "添加失败",
                  });
                });
        } else {
          return false;
        }
      });
      //this.resetFormulaSpecificationsDataProportioningForm(formName)

    },
    //复制
    handerCopyFormulaSpecificationsDataProportioning(row){
      this.formulaDataProportioningForm = row;
      this.dialogAddMaterialVisible = true;
      listMultipleLumiereFormulaMaterial({materialClassificationId:row.materialClassificationId
        ,formulaSpecificationsId:this.formulaDataProportioningForm.formulaSpecificationsId,
        groupName:this.formulaDataProportioningForm.groupName,
        materialType:this.formulaDataProportioningForm.materialType}).then(response => {
        this.formulaMaterialListAll = response.data.data;
      })

    },
    //删除规格数据配比
    handerDeleteFormulaSpecificationsDataProportioning(row) {
      var formulaDataProportioningForm = {
        id: row.id,
        formulaSpecificationsId: row.formulaSpecificationsId,
      };
      this.$confirm("确认删除？")
        .then((_) => {
          deleteFormulaSpecificationsDataProportioning(
            formulaDataProportioningForm
          )
            .then((res) => {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
              });
              this.getFormulaSpecificationsDataProportioning(
                formulaDataProportioningForm.formulaSpecificationsId
              );
            })
            .catch((res) => {
              this.$notify.error({
                title: "错误",
                message: "删除失败",
              });
            });
        })
        .catch((_) => {});
    },

    uploadPicUrl: function (response) {
      this.formulaSpecificationsForm.specificationsImg = response.data.url;
    },
    handleRemove: function () {
      this.formulaSpecificationsForm.specificationsImg = '';
    },
    formatPrice(row, column, cellValue) {
      // 在金额前面添加 $ 符号，并返回新的字符串
      if (cellValue != undefined) {
        return "$" + cellValue.toFixed(2);
      }
    },
  },
  filters: {},
};
</script>
        <style scoped>
</style>

      <style>
.circle {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 10px;
}
.parent-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; /* 在水平方向上居中对齐 */
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
.avatar-uploader__status_label {
  display: block;
  color: red;
  cursor: pointer;
}

.el-table__header-wrapper  .el-checkbox{
  display:none
}


</style>
